<template>
<div class="index">
    <div class="index-body">
		<div class="index-body-h">
			<h2 class="index-body-h3">{{listdata.bbb}}</h2>
		</div>
		<div class="index-body-box">
			<img 
			class="index-body-img"
			:src="listdata.aaa" >
		</div>
		<div class="index-body-right">
			<ul>
				<li>
					<ul>
						<li class="index-body-right-p">
							<p><a href="http://www.baidu.com">03.电信架构师带你一节课掌握数据库调优</a></p>
							<p><a href="http://www.baidu.com">电信架构师带你一节课掌握数据库调优</a></p>
							<p><a href="http://www.baidu.com">7月5日&nbsp;&nbsp;22：30-23：00&nbsp;&nbsp;已结束&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</a></p>
						</li>
						<br>
						<li class="index-body-right-p">
							<p><a href="http://www.baidu.com">03.电信架构师带你一节课掌握数据库调优</a></p>
							<p><a href="http://www.baidu.com">电信架构师带你一节课掌握数据库调优</a></p>
							<p><a href="http://www.baidu.com">7月5日&nbsp;&nbsp;22：30-23：00&nbsp;&nbsp;已结束&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</a></p>
						</li>
						<br>
						<li class="index-body-right-p">
							<p><a href="http://www.baidu.com">03.电信架构师带你一节课掌握数据库调优</a></p>
							<p><a href="http://www.baidu.com">电信架构师带你一节课掌握数据库调优</a></p>
							<p><a href="http://www.baidu.com">7月5日&nbsp;&nbsp;22：30-23：00&nbsp;&nbsp;已结束&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</a></p>
						</li>
						<br>
						<li class="index-body-right-p">
							<p><a href="http://www.baidu.com">03.电信架构师带你一节课掌握数据库调优</a></p>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="index-body-button">
			<div class="index-body-button-left">
				<a href="http://www.baidu.com">来源平台：{{listdata.ddd}}</a>
			</div>
			<div>
				<button
				class="index-body-button-right"
				@click="click(
					listdata.abc,
					listdata.bbb,
					listdata.aaa,
					listdata.ccc,
					listdata.ddd
					)"
				><a>+ {{listdata.ccc}}</a></button>
			</div>
		</div>
	</div>
<div class="test"></div>
	 <div class="details">
            <div class="content">
                <div class="center">
                    <div class="right">
                        <el-tabs v-model="activeName" @tab-click="handleClick" class="123">
                            <el-tab-pane label="课程介绍" name="first" class="tBorder">
                                <introduce></introduce>
                            </el-tab-pane>
                            <el-tab-pane label="课程目录" name="second">
                                <catalogue></catalogue>
                            </el-tab-pane>
                            <el-tab-pane label="用户评论" name="third">
                                <comment></comment>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="left">
                        <img src="../../../public/img/gxkt.png" alt="">
                        <img src="../../../public/img/tj.png" alt="">
                    </div>
                </div>
                <div class="foote">
                    <h3>热门知识</h3>
                    <div>
                        <span v-for="(item, idx) in hot" :key="idx">{{ item }}</span>
                    </div>
                </div>
            </div>
        </div>
</div>

</template>

<script>
import introduce from '@/components/Introduce.vue'
import catalogue from '@/components/Catalogue.vue'
import comment from '@/components/Comment.vue'
export default{
	
	name:"index",
	data(){
		return{
			listdata:[],
			 activeName: 'second',
			 hot: ['CAD', '计算机二级', '产品经理', '视频剪辑']
		}
	},
	components: {
         introduce, catalogue, comment
    },
	created(){
		this.getdata()
	},
	methods:{
		getdata(){
			const abc = this.$route.params.id;
			const aaa = this.$route.query.Img;
			const bbb = this.$route.query.Name;
			const ccc = this.$route.query.number;
			const ddd = this.$route.query.platform;
			this.listdata = {
				aaa,bbb,abc,ccc,ddd
			}
			// console.log(this.listdata)
		},
		click(abc){
				this.$router.push({
					path:`/user/${abc}`,
				})
		},
		handleClick(tab, event) {
            console.log(tab, event);
        }
	}
}
</script>

<style lang="less" scoped>
.test{
	height: 20px;
}

.index{
	width: 1200px;
	margin: 0 auto;
	.index-body{
		width: 100%;
		height: 450px;
		// background-color: aqua;
		.index-body-h{
			// background-color: aquamarine;
			.index-body-h3{
				display: inline-block;
				margin-top: 15px;
				margin-left: 25px;
			}
		}
		.index-body-box{
			// flex: 1;
			margin-top: 15px;
			width: 700px;
			float: left;
			height: 388px;
			margin-bottom: 15px;
			// background-color: red;
			.index-body-img{
				width: 100%;
				height: 100%;
			}
		}
		.index-body-right{
			width: 450px;
			height: 315px;
			float: right;
			margin-top: 15px;
			background-color: rgb(69, 66, 73);
			.index-body-right-p{
				color: rgb(157, 159, 161);
				margin-left: 35px;
				font-weight: 300;
				margin-right: 20px;
				border-bottom: 1px solid rgb(87, 99, 86);
				margin-top: 10px;
				a{
					color: rgb(189, 191, 194);
					text-decoration: none;
				}
				a:hover{
					text-decoration: underline;
				}
			}
		}
		.index-body-button{
			float: right;
			background-color: rgb(69, 66, 73);
			width: 450px;
			height: 73px;
			// margin-: 15px;
			.index-body-button-left{
				width: 50%;
				height: 100%;
				// background-color: aqua;
				float: left;
				text-align: center;
				line-height: 73px;
				a{
					color: rgb(189, 191, 194);
					text-decoration: none;
				}
				a:hover{
						color: rgb(158, 158, 158); 
					}
			}
			.index-body-button-right{
					width: 200px;
					height: 35px;
					font-size: 19px;
					background-color: aliceblue;
					border: none;
					margin-top: 18px;
					a{
						color: black;
						text-decoration: none;
					}
					a:hover{
						color: rgb(16, 175, 243);
					}
			}
		}
	}


	.details{
      background-color: #f5f8fa;
}
.content {
    .center {
        display: flex;
        justify-content: space-between;
    }

    .tBorder {
        border-bottom: 2px solid #409eef;
    }

    width: 1200px;
    margin: 0 auto;
    // background-color: pink;


    .right {
        background-color: #fff;
        width: 790px;
        border-radius: 5px;
        padding: 15px;
        border-radius: 10px;

        /deep/ .el-tabs__item {
            font-size: 16px;
            line-height: 44px;
            padding: 0 20px;
            margin: 0 20px;
        }
        /deep/.el-tabs__active-bar {
            background-color: #fff;
        }
        /deep/.el-tabs__nav-wrap::after {
            background-color: #fff;
        }
    }
    .left {
        img {
            width: 360px;
            margin-bottom: 20px;
        }
    }
    .foote {
        div {
            span {
                display: inline-block;
                border: 1px solid #e4ebf0;
                border-radius: 8px;
                background: #f5f8fa;
                font-size: 14px;
                line-height: 16px;
                padding: 6px 8px;
                color: #586470;
                margin-right: 10px;
            }
        }
    }

}
	
}

</style>
